<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
		<style>
			.test2{
				transform-style: preserve-3d;
				width: 100px;
				height: 100px;
				/*position: relative;*/
				animation: autoRotate 5s linear infinite;
			}
			@keyframes autoRotate{
				/*from{}*/
				to{transform: rotateY(360deg) rotateZ(360deg);}
			/*	to{transform: rotateY(360deg);}*/
			}
			
			.side{
				width: 100%;
				height: 100%;
				position: absolute;
				left: 0;
				top: 0;
				opacity: .7;
				text-align: center;
				/*line-height: 100px;*/
				/*font-size: 50px;*/
			}
			/*
			 X Y Z轴跟着转。
			 * */
			.front{
				background: red;
				transform: translateZ(50px);
			}
			
			.right{
				background: deeppink;
				transform: rotateY(90deg) translateZ(-50px);
			}
			
			.left{
				background: skyblue;
				transform: rotateY(-90deg) translateZ(-50px);
			}
			
			.back{
				background purple;
				transform: rotateY(0deg) translateZ(-50px);
			}
			
			.top{
		
				background: yellow;
				transform: rotateX(-90deg) translateZ(-50px);
	
			}
			
			.bottom{
				background: greenyellow;
				transform: rotateX(90deg) translateZ(-50px);
			}
		</style>
	<body>
		<div class="test2">
			<div class="side front">前 红色</div>
			<div class="side back">后 紫色</div>
			<div class="side left">左 天蓝</div>
			<div class="side right">右 粉色</div>
			<div class="side top">上 黄色</div>
			<div class="side bottom">下 绿色</div>
		</div>
	</body>
</html>
